﻿<!DOCTYPE html>
<html lang="zh" class="no-js">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <title>联系我们</title>
    <meta name="description" content="Description...">
    <meta name="keywords" content="keyword1,keyword2,keyword3..">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="fonts/FontAwesome/font-awesome.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="plugin/swiper3/css/swiper.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="js/jquery-1.10.1.js"></script>
    <script src="js/prefixfree.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="plugin/swiper3/js/swiper.min.js"></script>
    <script src="plugin/swiper3/js/swiper.animate1.0.2.min.js"></script>
    <!-- <script src="js/public.js"></script> -->
    <script src="js/wow.min.js"></script>
    <script>
        var wow = new WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: false,
            live: true
        });
        wow.init();
    </script>
    <!--[if lt IE 9]>
	  <script src="js/html5shiv.min.js"></script>
	  <script src="js/respond.min.js"></script>
	<![endif]-->
    <script>
        function scro() {
            if ($(document).scrollTop() > 50) {
                $(".headerBg").addClass("active");
            } else {
                $(".headerBg").removeClass("active");
            }
        }
        scro();
        $(window).scroll(function () {
            scro();
        })
    </script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <!-- 头部 start -->
        <header class="headerBg fixed-top">
            <div class="container-fluid">
                <div class="logo"><a href="#"><img :src="companyInfo.logoUrl" class="img-responsive" alt=""
                            width="100%"></a></div>
                <div class="menuBtn">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div class="hdRig clearfix">
                    <div class="header_phone">
                        <div class="icon_phone pt5 fl"><img src="images/icon_phone.png"></div>
                        <div class="phone fl">
                            <h4>服务咨询热线：</h4>
                            <h2>{{companyInfo.phone}}</h2>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
                <div class="navBox hidden-xs hidden-sm">
                    <ul class="navList list-unstyled">
                        <li class="navLi">
                            <h3><a href="index.html"><span>首页</span></a></h3>
                        </li>
                        <!-- <li class="navLi">
            <h3><a href="javascript:void(0)"><span>解决方案</span></a></h3>
          </li> -->
                        <li class="navLi">
                            <h3><a href="Product-services.html"><span>产品中心</span></a></h3>
                            <div class="navSub">
                                <ul class="navSubList list-unstyled">
                                    <li v-for="item in productCategory" :key="item.id" class="navSubLi">
                                        <h4><a :href="`Product-services.html?id=${item.id}`">{{item.productName}}</a>
                                        </h4>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <!-- <li class="navLi">
            <h3><a href="Cases.html"><span>客户案例</span></a></h3>
          </li> -->
                        <!-- <li class="navLi">
            <h3><a href="javascript:void(0)"><span>关于我们</span></a></h3>
            <div class="navSub">
              <ul class="navSubList list-unstyled">
                <li class="navSubLi">
                  <h4><a href="onepage.html">公司简介</a></h4>
                </li>
                <li class="navSubLi">
                  <h4><a href="contact.html">联系方式</a></h4>
                </li>
                <li class="navSubLi">
                  <h4><a href="culture.html">企业文化</a></h4>
                </li>
                <li class="navSubLi">
                  <h4><a href="course.html">企业历程</a></h4>
                </li>
                <li class="navSubLi">
                  <h4><a href="news.html">新闻动态</a></h4>
                </li>
                <li class="navSubLi">
                  <h4><a href="Recruitment.html">人才招聘</a></h4>
                </li>
              </ul>
            </div>
          </li> -->
                        <li class="navLi">
                            <h3><a href="onepage.html"><span>关于我们</span></a></h3>
                        </li>
                        <li class="navLi">
                            <h3><a href="contact.html" class="nav-active"><span>联系我们</span></a></h3>
                        </li>
                        <!-- <li class="navLi">
            <h3><a href="Cooperation.html"><span>合作伙伴</span></a></h3>
          </li> -->
                        <li class="navLi language"><a href="contact.html"><span class="active">中文
                                </span></a>&nbsp;&nbsp;/&nbsp;&nbsp; <a href="contact_en.html"><span> English</span></a>
                        </li>
                    </ul>

                </div>
                <div class="navBoxm"></div>
            </div>
        </header>
        <!-- 头部 end -->
        <div class="content-wrap"></div>
        <div class="mainBg">


            <div class="container">
                <div class="contact">
                    <div class="row">
                        <div class="col-xs-24 col-sm-24 col-md-24 wow fadeInLeft" style="margin: 0px auto;">
                            <div class="contactWay">
                                <h3>{{companyInfo.companyName}}</h3>
                                <p><i class="fa fa-map-marker icon-box icon-xs"></i>地址：{{companyInfo.address}}</p>
                                <p><i class="fa fa-phone icon-box icon-xs"></i>服务电话：{{companyInfo.phone}}</p>
                                <p v-if="companyInfo.whatsApp"><i
                                        class="fa fa-whatsapp icon-box icon-xs"></i>WhatsAPP：{{companyInfo.whatsApp}}
                                </p>
                                <p v-if="companyInfo.wxChat"><i
                                        class="fa fa-wechat icon-box icon-xs"></i>微信：{{companyInfo.wxChat}}</p>
                                <p v-if="companyInfo.email"><i
                                        class="fa fa-envelope-o icon-box icon-xs"></i>邮箱：{{companyInfo.email}}</p>
                                <p v-if="companyInfo.website"><i
                                        class="fa fa-internet-explorer icon-box icon-xs"></i>网址：<a
                                        :href="companyInfo.website">{{companyInfo.website}}</a>
                                </p>
                            </div>
                        </div>
                        <!-- <div class="col-xs-12 col-sm-12 col-md-6 wow fadeInLeft">
                            <img src="images/soluImg1.png" alt="" width="100%">
                        </div> -->

                    </div>
                </div>
            </div>

            <div class="container">
                <p>
                    <h2 class="wow fadeInUp text-center animated"><span class="h-b">留言板 </span></h2>
                </p>
                <div class="message">

                    <div class="row">
                        <div class="col-xs-24 col-sm-24 col-md-8 wow fadeInLeft" style="margin: 0 auto;">

                            <el-form v-loading="loading" style="margin: 0 auto;" :model="ruleForm" ref="ruleForm"
                                label-width="0px" class="demo-ruleForm">
                                <el-form-item required prop="name" :rules="[
                                { required: true, message: '请输入名字', trigger: 'blur' }
                              ]">
                                    <el-input placeholder="名字" v-model="ruleForm.name"></el-input>
                                </el-form-item>
                                <el-form-item :rules="[
                                { required: true, message: '请输入公司名称', trigger: 'blur' }
                              ]" prop="companyName">
                                    <el-input placeholder="公司名称" v-model="ruleForm.companyName"></el-input>
                                </el-form-item>
                                <el-form-item prop="email" :rules="[
                                { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                                { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                              ]">
                                    <el-input placeholder="邮箱" v-model="ruleForm.email"></el-input>
                                </el-form-item>
                                <el-form-item prop="phoneInfo" :rules="[
                                { required: true, message: '请输入电话/WhatsAPP', trigger: 'blur' }
                              ]">
                                    <el-input placeholder="电话/WhatsAPP" v-model="ruleForm.phoneInfo"></el-input>
                                </el-form-item>
                                <el-form-item prop="content">
                                    <el-input placeholder="内容" type="textarea" v-model="ruleForm.content"
                                        :maxlength="200" show-word-limit></el-input>
                                </el-form-item>


                                <div class="submit-btn">
                                    <el-button style="margin: 0 auto;" @click="submitForm('ruleForm')">立即留言
                                    </el-button>
                                </div>
                            </el-form>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <p>
                    <h2 class="wow fadeInUp text-center animated"><span class="h-b">电子地图</span></h2>
                </p>
                <div class="contact_map container" id="dituContent"></div>
            </div>

        </div>
        <footer class="footerBg">
            <div class="container">
                <div class="footTop">
                    <div class="footTopR text-right">
                        <div class="clear">咨询服务电话：</div>
                        <p class="fTel">{{companyInfo.phone}}</p>
                        <!-- <p>（周一至周五8:30-17:30）</p> -->
                    </div>
                    <div class="footTopL">
                        <ul class="footLink list-unstyled">
                            <li>
                                <h3><a class="ellipsis" href="index.html">首页</a></h3>
                            </li>
                            <li>
                                <h3><a class="ellipsis" href="Product-services.html">产品中心</a></h3>
                                <div class="footSub">
                                    <div class="footSub-item" v-for="item in productCategory.slice(0,5)" :key="item.id">
                                        <a class="ellipsis"
                                            :href="`Product-services.html?id=${item.id}`">{{item.productName}}
                                        </a>
                                    </div>
                                    <div v-if="productCategory.length > 5" class="footSub-item">
                                        <a class="ellipsis" :href="`Product-services.html`" style="color:#ff0000">MORE
                                        </a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <h3><a class="ellipsis" href="onepage.html">关于我们</a></h3>
                            </li>
                            <li>
                                <h3><a class="ellipsis" href="contact.html">联系我们</a></h3>
                            </li>
                        </ul>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="footBot">
                <p>Copyright © 2024 {{companyInfo.companyName}} </p>
                <div class="clear"></div>
            </div>
        </footer>
    </div>

    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=gyQnwN7Gw2gFs6RQ0gmGm7YDGlBN5mvb">
    </script>
</body>

</html>
<script src="js/config.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                ruleForm: {
                    "name": "",
                    "companyName": "",
                    "email": "",
                    "phoneInfo": "",
                    "content": ""

                },
                companyInfo: {},
                productCategory: []
            }
        },
        methods: {
            // 公司基本信息
            async getCompanyBasicData() {
                const res = await axios.get(basicUrl +
                    '/company/companyInformation/detail?zhCn=1') // 调用API接口获取用户列表
                this.companyInfo = res.data.data
                console.log(this.companyInfo);
            },
            // 产品分类
            async getProductCategory() {
                const res = await axios.get(basicUrl +
                    '/company/companyProduct/list?zhCn=1')
                this.productCategory = res.data.data
                console.log(this.productCategory);
                // 创建 script 标签
                var script = document.createElement('script');
                // 设置 script 标签的 src 属性为要引入的脚本路径
                script.src = './js/public.js';
                // 获取 head 元素
                var head = document.getElementsByTagName('head')[0];
                // 在 head 中添加 script 标签
                head.appendChild(script);
            },
            async submitForm() {
                this.$refs.ruleForm.validate(async (valid) => {
                    if (valid) {
                        this.loading = true
                        const res = await axios.post(basicUrl +
                            '/company/companyContent/add', this.ruleForm)
                        if (res.data.code == 200) {
                            this.loading = false
                            this.$message({
                                message: '留言成功',
                                type: 'success'
                            });
                            this.$refs.ruleForm.resetFields();
                        }
                    } else {
                        this.loading = false
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

        },
        async mounted() {
            await this.getCompanyBasicData()
            this.getProductCategory()

            //创建和初始化地图函数：
            function initMap() {
                createMap(); //创建地图
                setMapEvent(); //设置地图事件
                //addMapControl();//向地图添加控件
                addMarker(); //向地图中添加marker
            }

            //创建地图函数：
            function createMap() {
                var map = new BMapGL.Map("dituContent"); //在百度地图容器中创建一个地图
                var point = new BMapGL.Point(113.823398,22.799931); //定义一个中心点坐标
                map.centerAndZoom(point, 18); //设定地图的中心点和坐标并将地图显示在地图容器中
                window.map = map; //将map变量存储在全局
            }

            //地图事件设置函数：
            function setMapEvent() {
                map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
                map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
                map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
                map.enableKeyboard(); //启用键盘上下左右键移动地图
            }

            //地图控件添加函数：
            function addMapControl() {
                //向地图中添加缩放控件
                var ctrl_nav = new BMapGL.NavigationControl({
                    anchor: BMapGL_ANCHOR_TOP_LEFT,
                    type: BMapGL_NAVIGATION_CONTROL_LARGE
                });
                map.addControl(ctrl_nav);
                //向地图中添加比例尺控件
                var ctrl_sca = new BMapGL.ScaleControl({
                    anchor: BMapGL_ANCHOR_BOTTOM_LEFT
                });
                map.addControl(ctrl_sca);
            }

            //标注点数组
            var markerArr = [{
                title: this.companyInfo.companyName,
                content: `${this.companyInfo.address}<br/>联系电话：${this.companyInfo.phone}`,
                point: "113.823398,22.799931",
                isOpen: 1,
                icon: {
                    w: 23,
                    h: 25,
                    l: 46,
                    t: 21,
                    x: 9,
                    lb: 12
                }
            }];
            //创建marker
            function addMarker() {
                for (var i = 0; i < markerArr.length; i++) {
                    var json = markerArr[i];
                    var p0 = json.point.split(",")[0];
                    var p1 = json.point.split(",")[1];
                    var point = new BMapGL.Point(p0, p1);
                    var iconImg = createIcon(json.icon);
                    var marker = new BMapGL.Marker(point, {
                        icon: iconImg
                    });
                    var iw = createInfoWindow(i);
                    var label = new BMapGL.Label(json.title, {
                        "offset": new BMapGL.Size(json.icon.lb - json.icon.x + 10, -20)
                    });
                    marker.setLabel(label);
                    map.addOverlay(marker);
                    label.setStyle({
                        borderColor: "#808080",
                        color: "#333",
                        cursor: "pointer"
                    });

                    (function () {
                        var index = i;
                        var _iw = createInfoWindow(i);
                        var _marker = marker;
                        _marker.addEventListener("click", function () {
                            this.openInfoWindow(_iw);
                        });
                        _iw.addEventListener("open", function () {
                            _marker.getLabel().hide();
                        })
                        _iw.addEventListener("close", function () {
                            _marker.getLabel().show();
                        })
                        label.addEventListener("click", function () {
                            _marker.openInfoWindow(_iw);
                        })
                        if (!!json.isOpen) {
                            label.hide();
                            _marker.openInfoWindow(_iw);
                        }
                    })()
                }
            }
            //创建InfoWindow
            function createInfoWindow(i) {
                var json = markerArr[i];
                var iw = new BMapGL.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json
                    .title +
                    "</b><div class='iw_poi_content'>" + json.content + "</div>");
                return iw;
            }
            //创建一个Icon
            function createIcon(json) {
                var icon = new BMapGL.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMapGL
                    .Size(
                        json.w, json.h), {
                        imageOffset: new BMapGL.Size(-json.l, -json.t),
                        infoWindowOffset: new BMapGL.Size(json.lb + 5, 1),
                        offset: new BMapGL.Size(json.x, json.h)
                    })
                return icon;
            }

            initMap(); //创建和初始化地图
        }
    });
</script>
<style>
    .el-button {
        background: #ff0000;
        border: 1px solid #ff0000;
        color: #fff;
    }

    .el-button:hover {
        background: #ff0000;
        border: 1px solid #ff0000;
        color: #fff;
    }

    .submit-btn {
        display: flex;
        justify-content: center;
    }
</style>